<template>
  <div class="gateway-container">
    <div class="app-container home">
      <div class="banner"></div>
      <div class="container" style="padding: 0 30px">
        <el-row :gutter="30">
          <el-col class="gateway-card-container" :span="12" v-for="item in noticeType" :key="item.dictCode">
            <gateway-card
              :list="noticeGrouped.get(item.dictValue)"
              :title="item.dictLabel"
              :noticeType="item.dictValue"
              :noticeSubTypes="item.noticeSubTypes"
            />
          </el-col>
        </el-row>
      </div>
      <div class="footer"></div>
    </div>
  </div>
</template>

<script>
import { listNoticeType,selectNoticesBySingleType, listSubTypeByNoticeType } from '@/api/system/notice'
import { getDicts } from '@/api/system/dict/data'
import GatewayCard from './card/index.vue'

export default {
  name: 'Gateway',
  components: {
    'gateway-card': GatewayCard
  },
  data() {
    return {
      // 版本号
      version: '3.8.9',
      noticeList: [],
      loading: true,
      noticeType: [],
      noticeGrouped: new Map()
    }
  },
  created() {
    // this.getList()
    this.getDicts().then(() => {
      this.getList()
    })
  },
  computed: {
  },
  methods: {
    goTarget(href) {
      window.open(href, '_blank')
    },
    selectNoticesBySingleType(noticeTypes) {
      const _that = this
      if (noticeTypes.length > 0) {
        noticeTypes.map(noticeType => {
          listSubTypeByNoticeType(noticeType.dictCode).then(r1 => {
            _that.$set(noticeType, 'noticeSubTypes', r1.data)
            selectNoticesBySingleType(noticeType.dictValue).then(response => {
              _that.noticeGrouped.set(noticeType.dictValue, response.rows)
              // 强制触发更新（通过创建新的Map引用）
              _that.noticeGrouped = new Map(_that.noticeGrouped)
            })
          })
        })
      }
    },
    getDicts() {
      return  getDicts('sys_notice_type').then(response => {
        this.noticeType = response.data
        this.selectNoticesBySingleType(response.data)
      })
    },
    reduceGroupNotice(list,attr) {
      const map = new Map();
      list.forEach(obj => {
        const key = obj[attr];
        if (!map.has(key)) map.set(key, []);
        map.get(key).push(obj);
      });
      return map
    },
    getList() { // 首页列表增加子类后有另外的需要处理的
      this.loading = true
      listNoticeType().then(response => {
        // this.noticeGrouped = this.reduceGroupNotice(response.rows,'noticeType')
        this.loading = false
      }).catch(e => {
        console.log(e)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.gateway-container {
  .container {
    min-height: 800px;
  }
}
//.gateway-card-container {
//  //&:nth-child(odd){
//  //  padding: 0 15px 0 30px;
//  //}
//  //&:nth-child(even){
//  //  padding: 0 30px 0 15px;
//  //}
//}
</style>

